<template>
<div class="box-top">
    <el-form>
        <el-form-item label="用户名">
            <el-input clearable placeholder="请输入用户名" v-model="queryForm.username"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="databaseType">
            <el-select popper-class="deptSelectDown" clearable v-model="queryForm.deptId" placeholder="请选择部门">
                <el-option
                    :label="deptLabel"
                    :value="queryForm.deptId">
                    <el-tree
                        class="scroll-bar tree-box"
                        ref="deptTree"
                        node-key="id"
                        :check-strictly="true"
                        :props="labelProp"
                        :data="depList"
                        @node-click="nodeClick">
                    </el-tree>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker clearable v-model="queryForm.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-preventReClick="2000" @click="$emit('search')">查询</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    name: 'ProjectsQuery',
    props: {
        queryForm: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            labelProp: {
                label: 'title'
            },
            deptLabel: '',
            depList: []
        }
    },
    created () {
        this.getDeps()
    },
    methods: {
        reset () {
            this.deptLabel = ''
            this.$emit('reset')
        },
        nodeClick (target, node) {
            this.queryForm.deptId = target.id
            this.deptLabel = target.title
        },
        getDeps () {
            this.$get('/dept', {}).then(res => {
                if (res) {
                    this.depList = res.rows.children
                }
            })
        }
    }
}
</script>
<style lang="less">
.deptSelectDown {
    .el-select-dropdown__item {
        overflow: inherit;
        height: 100%;
        background-color: #fff;
        &:hover {
            background-color: #fff;
        }
    }
    .el-select-dropdown__item.selected {
        font-weight: 500;
    }
}
</style>
